<template>
  <div class="app-container">
    <!-- <mainTilte title="采购发票管理" /> -->
    <!-- <el-form ref="searchParams" size="small" :inline="true" :model="searchParams" label-width="110px">
      <div class="filters-wrap clearfix">
        <div class="filters-area">
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-select v-model.trim="searchParams.type" clearable>
                <el-option v-for="(item, index) of issignContract" :key="index" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-input v-model.trim="searchParams.value" placeholder="关键字回车搜索" @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </div>
      </div>
    </el-form> -->
    <div class="mb10">
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="searchParams" display="block" @handleSearch="handleSearch">
        <div>
          <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </div>
      </form-selections>
    </div>

    <div class="page-grid">
      <div class="action-group">
        <el-button v-action="'purchaseInvoice@save'" size="small" type="primary" @click="bulkShipment">新增发票</el-button>
        <el-button v-action="'purchaseInvoice@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <egrid v-loading="loading" class="egrid" stripe fit border highlight-current-row element-loading-text="正在努力加载中..." :column-type="['selection']" :data="tableData" :columns="columns" :columns-schema="columnsSchema" :columns-handler="columnsHandler" :screen-heigh="screenHeigh" @selection-change="checkIds" />
      <epagination v-if="tableData" :total="total" :current="searchParams.page" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import operationBtnGroup from '@/components/base/operationBtnGroup'
// import { downloadxlsx } from '@/utils/index'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import cacheList from '@/layout/mixin/cacheList'
import DownModul from '@/components/DownModul/index.vue'
export default {
  name: 'PurchaseInvoice',
  components: { DownModul },
  directives: {
    action
  },
  mixins: [list, cacheList],
  data() {
    return {
      isActive: false,
      componentName: 'PurchaseInvoice',
      allAmount: '',
      value1: [],
      loading: false,
      dialogAddVisible: false, // 新增供应商弹框
      title: '',
      loadingText: '',
      rule: {},
      /** *
       * 定义搜索框
       */
      searchParams: {
        page: 1,
        limit: 10, // 默认是10
        totalRows: 0,
        value: '',
        type: '',
        invoice_no: '',
        payer: '',
        purchase_code: '',
        supply: ''
      },
      formItems: [
        {
          label: '发票号',
          key: 'invoice_no',
          type: 'input',
          placeholder: '请输入发票号'
        },
        {
          label: '付款单位',
          key: 'payer',
          type: 'input',
          placeholder: '请输入付款单位'
        },
        {
          label: '采购单号',
          key: 'purchase_code',
          type: 'input',
          placeholder: '请输入采购单号'
        },
        {
          label: '供应商',
          key: 'supply',
          type: 'input',
          placeholder: '请输入供应商'
        }
      ],
      /** *
       * 定义显示的表格
       */
      columns: [
        {
          label: '发票号',
          prop: 'invoice_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '发票日期',
          prop: 'invoice_date',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '付款单位',
          prop: 'payer',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '发票税率(%)',
          prop: 'rate',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '发票金额',
          prop: 'tax_amount',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '采购单号',
          prop: 'purchase_code',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '供应商',
          prop: 'supply',
          width: '120',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'created_by_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'updated_by_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchema: {},
      issignContract: [
        {
          name: '发票号',
          code: 'invoice_no'
        },
        {
          name: '付款单位',
          code: 'payer'
        },
        {
          name: '采购单号',
          code: 'purchase_code'
        },
        {
          name: '供应商',
          code: 'supply'
        }
      ],
      form: {
        id: null,
        supplierCode: null, // 供应商代码
        supplierName: null, // 供应商名称
        settlementCycle: null, // 结算周期
        buyer: null, // 采购员
        contacts: '', // 联系人
        phone: null, // 联系人手机
        fixedTelephone: null, // 固定电话
        fax: null, // 传真
        // address: null, // 地址
        postcode: null, // 邮编
        payment: null, // 预付款比例
        notes: null // 备注说明
      },
      exportLoading: false,
      cachePaths: [
        '/supplyChain/purchaseInvoice/addPurchaseInvoice'
      ],
      exportUrl: '/purchase-invoice-export',
      formVisibleDown: false,
      downLoadParams: {},
      optionsModul: [
        {
          key: 'purchase_code',
          label: '采购单号'
        },
        {
          key: 'invoice_no',
          label: '发票号'
        },
        {
          key: 'invoice_date',
          label: '发票日期'
        },
        {
          key: 'payer',
          label: '付款单位'
        },
        {
          key: 'rate',
          label: '发票税率'
        },
        {
          key: 'tax_amount',
          label: '发票金额'
        },
        {
          key: 'unpaid_amount',
          label: '未付金额'
        },
        {
          key: 'supply',
          label: '供应商'
        },
        {
          key: 'notes',
          label: '备注'
        }
      ]
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    this.query()
  },
  activated() {
    this.query()
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const params = {}
      const { invoice_no, payer, purchase_code, supply } = vm.searchParams
      if (invoice_no) {
        params['invoice_no'] = invoice_no
      }
      if (payer) {
        params['payer'] = payer
      }
      if (purchase_code) {
        params['purchase_code'] = purchase_code
      }
      if (supply) {
        params['supply'] = supply
      }
      // vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    // handleExport() {
    //   const vm = this
    //   const { type, value } = vm.searchParams
    //   const params = {}
    //   if (type) params[type] = value
    //   vm.exportLoading = true
    //   vm.$http.get('/purchase-invoice-export', { params }).then(res => {
    //     downloadxlsx(res.data)
    //     vm.exportLoading = false
    //   }).catch(() => {
    //     vm.exportLoading = false
    //   })
    // },
    handleSearch() {
      const vm = this
      vm.searchParams.page = 1
      vm.query()
    },
    handleRefresh() {
      const vm = this
      vm.searchParams.page = 1
      vm.searchParams.limit = 10
      vm.searchParams.invoice_no = ''
      vm.searchParams.payer = ''
      vm.searchParams.purchase_code = ''
      vm.searchParams.supply = ''
      vm.query()
    },
    bulkShipment() {
      this.$router.push('/supplyChain/purchaseInvoice/addPurchaseInvoice')
    },
    // 新增-保存
    saveData() { },
    // 自定义操作栏
    columnsHandler(cols) {
      const that = this
      return cols.concat({
        width: '200',
        label: '操作',
        align: 'center',
        fixed: 'left',
        propsHandler({ row }) {
          return {
            row,
            delAction: 'purchaseInvoice@delete',
            editAction: 'purchaseInvoice@update'
          }
        },
        component: operationBtnGroup,
        // listeners 可用于监听自定义组件内部 $emit 出的事件
        listeners: {
          editTableClick(row) {
            that.$router.push({
              path: '/supplyChain/purchaseInvoice/addPurchaseInvoice',
              query: { title: '编辑采购发票', row: JSON.stringify(row) }
            })
          },
          deleteTableClick(row) {
            that
              .$confirm('确认要删除？', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(() => {
                that.$http
                  .delete(`/purchase-invoice/${row.id}`)
                  .then((res) => {
                    if (res.code === 10000) {
                      that.$message.success('删除成功')
                      that.query()
                    }
                  })
                  .catch((err) => {
                    console.log(err)
                  })
              })
              .catch((action) => { })
          }
        }
      })
    },
    query() {
      let url = '/purchase-invoice'
      const { page, limit, invoice_no, payer, purchase_code, supply } = this.searchParams
      url += `?page=${page}&limit=${limit}`
      if (invoice_no) {
        url += `&invoice_no=${invoice_no}`
      }
      if (payer) {
        url += `&payer=${payer}`
      }
      if (purchase_code) {
        url += `&purchase_code=${purchase_code}`
      }
      if (supply) {
        url += `&supply=${supply}`
      }
      this.initTableData(url)
    },
    handleSizeChange(val) {
      this.searchParams.limit = val
      this.query()
    },
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.query()
    }
  }
}
</script>

<style lang="scss" scoped>
.minheight-400 {
  height: 400px;
  overflow-y: auto;
}
</style>
